<template>
    <a-modal v-model="currentVisible" width="400px" title="" @ok="handleOk" :afterClose="afterClose" @cancel="currentVisible = false" >
      <a-form-model ref="rulesForm" :model="rulesForm" :rules="rules">
        <template v-if="type == 1">
          <a-form-model-item label="延期原因" prop="reason" key="reason1">
            <a-textarea
              allowClear
              v-model="rulesForm.reason"
              placeholder="请说明延期原因"
            />
          </a-form-model-item>
          <a-form-model-item label="当前批次有效期延至" prop="validDate">
            <a-date-picker
              v-model="rulesForm.validDate"
              show-time
              type="date"
              valueFormat="YYYYMMDD"
              format="YYYYMMDD"
              placeholder="请选择"
              style="width: 100%;"
            />
          </a-form-model-item>
        </template>
        <a-form-model-item v-if="type == 2" label="作废原因" prop="reason" key="reason2">
          <a-textarea
            allowClear
            rows="4"
            v-model="rulesForm.reason"
            placeholder="请说明作废原因"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
</template>
<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      type: {
        type: [Number,String],
        default: 1 // 1延期 2作废
      }
    },
    data() {
      return {
        rulesForm: {
          validDate: '',
          reason: ''
        },
        rules: {
          validDate: [
            { required: true, message: '请选择', trigger: ['change', 'blur'] }
          ],
          reason: [
            { required: true, message: '请填写', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      currentVisible: {
        get () {
          return this.visible
        },
        set (val) {
          this.$emit('update:visible', val)
        }
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      handleOk() {
        this.$refs.rulesForm.validate(valid => {
          if (valid) {
            this.$emit('onCommonModalOk', this.rulesForm)
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      afterClose() {
        this.rulesForm = {
          validDate: '',
          reason: ''
        }
      }
    }
  }
</script>
<style lang="less" scoped>
</style>
